<template>
    
        <h1>商铺列表</h1>
        <div>
            <input type="text" v-model="info.shopName" />
            <select v-model="info.state">
                <option value="">全部</option>
                <option value="true">空闲</option>
                <option value="false">出租</option>
            </select>
            <button @click="getlist">查询</button>
            <button @click="show1">重置</button>
    </div>
    <div>
        <table class="table table-bordered">
            <tbody>
            <tr>
                <td>商铺名称</td>
                <td>业主</td>
                <td>电话</td>
                <td>面积</td>
                <td>时间</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for=" item in data.list">
                <td>{{item.spName}}</td>
                <td>{{item.yezhu}}</td>
                <td>{{item.phone.substring(0,4)+("****")+item.phone.substring(8,11)}}</td>
                <td>{{item.mianji}}</td>
                <td>{{moment(item.time).format('YYYY-MM-DD')}}</td>
                <td>{{item.state=true?'空闲':'出租'}}</td>
                <td>
                    <button @click="del(item.id)">删除</button>
                    <button @click="update(item.id)">编辑</button>
                </td>
                
            </tr>

            </tbody>
        </table>

    </div>
    <div>
      <!-- 显示 -->
      <span
        >共<b>{{ data.totalCount }}</b
        >条</span
      >
      <span
        >每页<b>{{ info.pageSize }}</b
        >条</span
      >
      <span
        >共<b>{{ info.pageIndex }}/{{ data.totalPage }}</b
        >页</span
      >
      <!-- 分页  全都是改是页码 -->
      <input type="button" value="首页" @click="goPage(1)" />
      <input type="button" value="上一页" @click="goPage(info.pageIndex - 1)" />
      <span v-for="item in data.totalPage" @click="goPage(item)">{{
        item
      }}</span>
      <input type="button" value="下一页" @click="goPage(info.pageIndex + 1)" />
      <input type="button" value="尾页" @click="goPage(data.totalPage)" />
      <input type="number" v-model="info.pageIndex" />
      <input type="button" value="跳转" @click="goPage(info.pageIndex)" />
      <!-- 这个改的页容量  -->
      <select v-model="info.pageSize" @change="show">
        <option :value="item" v-for="item in arr">每页{{ item }}条</option>
      </select>
    </div>
</template>

<script setup lang="ts">
//上传get请求
//再次上传get
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
let info: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    shopName: '',
   state:''
})
let data: any = reactive({
    list: [],
    totalCount: 0,
    totalPage: 0, 
})
let arr = [2, 5, 10, 20];
let ids:any = ref([]);
onMounted(() => {
    getlist(); 
})
const show1 = () => {
   info.shopName='';
   info.state=''; 
   info.pageIndex=1;
   info.pageSize=2;
   getlist();
}
const goPage = (num: any) => {
    
    if (num < 1) {
       info.pageIndex = 1;
       return;

    }
    if(num>data.totalPage){
        info.pageIndex=data.totalPage;
        return  ; 
    }
    info.pageIndex = num;
    getlist();
    return;
}
const show = () => {
    info.pageIndex = 1;
    getlist();
}
const getlist =()=>{
   axios({
    url:'/api/Shop',
    method:'get',
    params:info,
   }) 
   .then(res=>{
     data.list=res.data.list;
     data.totalCount=res.data.totalCount;
    data.totalPage=res.data.totalPage;
   })
   .catch(err=>{
    console.log(err);
  })
}
const del = (id: any) => {
  var f=confirm("是否删除");
  if(f)
{
    axios({
    url:'/api/Shop/del',
    method:'get',
    params:{id:id},
  }) 
  .then(res=>{
   if(res.data>0){
    alert('删除成功');
    getlist(); 
   } 
   else{
    alert('删除失败');
    return;
   }

  })

}
}
const update=(id:any)=>{
        router.push({
            path:'/AddShop',
            query:{
              id:id,
            }
        })
        
  }

</script>

<style scoped>

</style>